﻿import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 1920
    height: 1080
    title: qsTr("QML绘制练习")
    Column{
        spacing: 20
        anchors.centerIn: parent

        Row {
            spacing: 10
            anchors.top: parent
            anchors.horizontalCenter: parent.horizontalCenter

            Button {
                text: "绘制矩形"
                onClicked: canvasLoader.sourceComponent = rectangleComponent
            }

            Button {
                text: "绘制圆形"
                onClicked: canvasLoader.sourceComponent = circleComponent
            }

            Button {
                text: "绘制多边形"
                onClicked: canvasLoader.sourceComponent = polygonComponent
            }

            Button {
                text: "绘制文本"
                onClicked: canvasLoader.sourceComponent = textComponent
            }

            Button {
                text: "绘制线性渐变"
                onClicked: canvasLoader.sourceComponent = linearGradientComponent
            }

            Button {
                text: "绘制径向渐变"
                onClicked: canvasLoader.sourceComponent = radialGradientComponent
            }

            Button {
                text: "绘制阴影"
                onClicked: canvasLoader.sourceComponent = shadowComponent
            }

            Loader {
                id: canvasLoader
                width: 600
                height: 400
            }

        }

        Component {
            id: rectangleComponent
            Canvas {
                width: 300
                height: 200
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    ctx.fillStyle = "green";
                    ctx.fillRect(10, 10, 100, 50);
                }
            }
        }

        Component {
            id: circleComponent
            Canvas {
                width: 300
                height: 200
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    ctx.beginPath();
                    ctx.arc(150, 100, 40, 0, Math.PI * 2, true);
                    ctx.fillStyle = "blue";
                    ctx.fill();
                }
            }
        }

        Component {
            id: polygonComponent
            Canvas {
                width: 300
                height: 200
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    ctx.beginPath();
                    ctx.moveTo(150, 150);
                    ctx.lineTo(200, 200);
                    ctx.lineTo(250, 150);
                    ctx.lineTo(225, 100);
                    ctx.lineTo(175, 100);
                    ctx.closePath();
                    ctx.fillStyle = "red";
                    ctx.fill();
                }
            }
        }

        Component {
            id: textComponent
            Canvas {
                width: 300
                height: 200
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    ctx.font = "italic 30px sans-serif";
                    ctx.fillStyle = "blue";
                    ctx.fillText("Hello World", 50, 50);
                    ctx.strokeStyle = "red";
                    ctx.strokeText("Hello World", 50, 90);
                }
            }
        }

        Component {
            id: linearGradientComponent
            Canvas {
                width: 300
                height: 200
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    var gradient = ctx.createLinearGradient(0, 0, width, height);
                    gradient.addColorStop(0, "red");
                    gradient.addColorStop(1, "blue");
                    ctx.fillStyle = gradient;
                    ctx.fillRect(0, 0, width, height);
                }
            }
        }

        Component {
            id: radialGradientComponent
            Canvas {
                width: 300
                height: 200
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    var gradient = ctx.createRadialGradient(150, 100, 20, 150, 100, 100);
                    gradient.addColorStop(0, "yellow");
                    gradient.addColorStop(1, "red");
                    ctx.fillStyle = gradient;
                    ctx.beginPath();
                    ctx.arc(150, 100, 100, 0, Math.PI * 2, true);
                    ctx.fill();
                }
            }
        }

        Component {
            id: shadowComponent
            Canvas {
                width: 300
                height: 200
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.clearRect(0, 0, width, height);
                    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
                    ctx.shadowBlur = 10;
                    ctx.shadowOffsetX = 5;
                    ctx.shadowOffsetY = 5;
                    ctx.fillStyle = "green";
                    ctx.fillRect(50, 50, 200, 100);
                }
            }
        }
    }
}
